<template>
  <div class="home">
    <!-- 定义二级路由坑 -->
    <router-view v-if="$route.path=='/home/search'"></router-view>
    <div v-else>
      <!-- 搜索框 -->
      <van-search
        v-model="value"
        shape="round"
        placeholder="请输入搜索关键词"
        @click="$router.push('/home/search')"
      />
      <!-- 使用轮播图 -->
      <Swipe :bannerArr="bannerArr"></Swipe>
      <!-- 导航宫格 -->
      <Gird :channelArr="channelArr"></Gird>
      <!-- 品牌制造商 -->
      <Bread :brandListArr="brandListArr"></Bread>
      <!-- 新品上市 -->
      <Starting :newGoodsListArr="newGoodsListArr"></Starting>
      <!-- 人气推荐 -->
      <Sentiment :hotGoodsListArr="hotGoodsListArr"></Sentiment>
      <!-- 自定义轮播图 -->
      <TopicList :topicListArr="topicListArr"></TopicList>
      <!-- 懒加载 -->
      <Loading :categoryListArr="categoryListArr"></Loading>
    </div>
  </div>
</template>

<script>
// 引入轮播图组件
import Swipe from "@/components/Swipe.vue";
// 导入首页接口请求
import { getIndexData } from "@/utils/http";
// 引入宫格导航
import Gird from "@/components/Gird.vue";
// 引入bread插件
import Bread from "@/components/Bread.vue";
// 引入新品上市插件
import Starting from "@/components/Starting.vue";
// 引入人气推荐插件
import Sentiment from "@/components/Sentiment.vue";
// 引入自定义轮播图
import TopicList from "@/components/TopicList.vue";
// 引入懒加载
import Loading from "@/components/Loading.vue";
export default {
  name: "Home",
  data() {
    return {
      value: "", //搜索的关键字
      bannerArr: [], //轮播图组件
      channelArr: [], //导航数组
      brandListArr: [], //品牌制造商直供
      newGoodsListArr: [], //新品首发
      hotGoodsListArr: [], //人气推荐
      topicListArr: [], //自定义轮播图
      categoryListArr: [], //懒加载
    };
  },
  components: {
    Swipe,
    Gird,
    Bread,
    Starting,
    Sentiment,
    TopicList,
    Loading,
  },
  created() {
    // console.log(this);
    getIndexData().then((res) => {
      // console.log(res);
      this.bannerArr = res.data.data.banner;
      this.channelArr = res.data.data.channel;
      this.brandListArr = res.data.data.brandList;
      this.newGoodsListArr = res.data.data.newGoodsList;
      this.hotGoodsListArr = res.data.data.hotGoodsList;
      this.topicListArr = res.data.data.topicList;
      this.categoryListArr = res.data.data.categoryList;
    });
  },
};
</script>

<style lang='less' scoped>
.home {
  padding-bottom: 50px;
}
</style>